<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css" media="all">
    <link rel="stylesheet" href="/components/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/manage/css/base-search.css" media="all">


    <script src="/manage/js/app.js"></script>
</head>
<body>
<style>

</style>
<!-- 搜索 -->
<div class="searchTable layui-form">
    终端：
    <div class="layui-input-inline">
        <select id="terminal" lay-filter="terminal">
            <!--  <option value='" + dices[index].code + "' pid='" + dices[index].pid + "'>" + dices[index].name + "</option>-->
        </select>
    </div>
    角色名称：
    <div class="layui-inline">
        <input class="layui-input" id="name" name="name" placeholder="请输入角色名称搜索" autocompvare="off">
    </div>
    <button class="layui-btn layui-btn-normal layui-btn-sm" data-type="reload">搜索</button>
</div>
<!-- 表格 -->
<table class="auth-table" id="auth-table" lay-filter="auth-table"></table>
<!-- 分页插件 -->
<div class="page-table" id="page-table"></div>
<!-- 多删除添加  -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>
<!-- 每一行的数据修改或删除  -->
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
    <!--    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="roleMenu">菜单分配</a>-->
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="roleAuth">资源分配</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>

    var roleUrl = path + "/admin/role";
    var roleListUrl = path + "/admin/role/list";
    // 编辑添加页获取菜单
    var menuList = path + "/admin/menu/list?roleId={roleId}&isTree=true";
    //
    let page_add = "/page/manage_admin_role_roleAdd";  //角色添加弹出
    let page_upd = "/page/manage_admin_role_roleUpd";  //角色编辑弹出
    let page_role_menu = "/page/manage_admin_role_roleMenuAuth";
    let page_role_auth = "/page/manage_admin_role_roleUrlAuth";


    let res;       // 完整的后台数据
    var data;      // 当前行数据（弹出层时可直接parent.data获取）

    layui.use(['table', 'laypage', 'form'], function () {
        xijiainit();
        xijiaRenderTable();        //  数据表格 - 获取表格
        xijiaLayPage();            //  分页插件
        xijiaEventToolbar();       //  工具栏事件（多删除/添加）
        xijiaEventTool();          //  监听数据表格内按钮操作（编辑,删除等）
        xijiaEventSearch();        //  监听条件搜索
        xijiaEventSwitch();        //  监听禁用单选按钮
    });

    function xijiainit() {
        $("#terminal").html(Dict.getDictSelect(Enums.Admin.Terminal, "", "所有", "1"));     // 终端
        // 刷新,否则select可能不生效
        layui.form.render();

        // 监听终端选择(重新在服务端获取数据)
        layui.form.on('select(terminal)', function (data) {
            xijiaRenderTable();
        });
    }

    /**
     *  重载表格和加载表格
     * ---- getPage()= 获取 layui 当前分页参数 ===> 如：?current=1&size=10
     * ---- res = 后台返回的整个数据，整个页面可获取使用
     * @param params get请求的参数拼接
     *
     */
    function xijiaRenderTable() {
        res = Ajax.get(roleListUrl + getPage() + xijiaSearchParam());
        layui.table.render({
            elem: '#auth-table'
            , data: res.data.records
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , cols: [
                [
                    // {type: 'checkbox', fixed: 'left'}   //fixed: 'right', , fixed: 'left'
                    // {field: 'id', title: 'ID', width: 150}
                    {field: 'name', title: '角色名称'},
                    {field: 'code', title: 'Code'}

                    , {field: 'desc', title: '角色描叙'},
                    {
                        field: 'terminal', title: '终端', templet: function (res) {
                            return Dict.convert(Enums.Admin.Terminal, res.terminal);
                        }
                    },
                    {
                        field: 'disable', width: 200, title: '禁用/启用', templet: function (res) {
                            let id = res.id;
                            if (res.disable === 0) {
                                return "   <input type='checkbox'  id = '" + id + "' lay-filter='disable' lay-skin='switch' lay-text='启用|禁用' checked>"
                            } else if (res.disable === 1) {
                                return "   <input type='checkbox'  id = '" + id + "' lay-filter='disable' lay-skin='switch' lay-text='启用|禁用'>"
                            }
                        }
                    }
                    , {title: '操作', toolbar: '#barDemo', width: 400}
                ]
            ], parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records    //解析数据列表
                };
            }
        });
    }


    /**
     *   分页配置, 数据总数会在下一次点击事更新上一次数据库的总数量
     * @author ws
     * @mail  1720696548@qq.com
     * @param result 后台返回数据, 用于第一此加载总数据
     * @date  2020/4/22 0022 1:18
     * @return
     */
    function xijiaLayPage() {
        layui.laypage.render({
            // 注意，这里的 page-table 是 ID，不用加 # 号
            elem: 'page-table'
            , count: res.data.total    // 数据总数，从服务端得到
            , limit: res.data.size     // 每页数量
            // 基础信息配置
            , layout: pageJson.layout
            , curr: pageJson.curr
            , limits: pageJson.limits
            , groups: pageJson.groups
            , prev: pageJson.prev
            , next: pageJson.next
            // 监听 obj包含了当前分页的所有参数， 比如： obj.curr =当前页, obj.limit = 每页显示条数
            , jump: function (obj, first) {
                //首次不执行, 第一次加载时 first=true
                if (first) {
                    return;
                }
                // 刷新表格
                xijiaRenderTable();
            }
        });
    }


    /**
     *   工具栏事件（多删除 || 添加）  ==>> toolbar(auth-table): toolbar=监听表格头事件,  auth-table=数据表格elem 名称
     * @author ws
     * @mail  1720696548@qq.com
     * @param null
     * @date  2020/4/10 0010 0:05
     * @return
     */
    function xijiaEventToolbar() {
        layui.table.on('toolbar(auth-table)', function (obj) {
            //添加
            if (obj.event === "add") {
                Pop.tipsWindown(page_add, "900px", "90%", "添加");
            }
        });
    }

    /**
     *   监听数据表格内按钮（编辑 || 删除 || 其他）, tool(auth-table)==> tool =监听按钮， auth-table=数据表格elem对应值
     * @author ws
     * @mail  1720696548@qq.com
     * @param null
     * @date  2020/4/10 0010 0:03
     * @return
     */
    function xijiaEventTool() {
        layui.table.on('tool(auth-table)', function (obj) {
            data = obj.data;  //当前行数据
            // 编辑
            if (obj.event === 'edit') {
                Pop.tipsWindown(page_upd, "900px", "90%", "修改");
            }
            // 删除
            if (obj.event === 'del') {
                Pop.tipsDeleteId(roleUrl + "/" + data.id, obj);
            }
            // 菜单分配
            // if (obj.event === 'roleMenu') {
            //     Pop.tipsWindown(page_role_menu,"90%","90%","菜单分配",[])
            // }
            // 资源分配
            if (obj.event === 'roleAuth') {
                Pop.tipsWindown(page_role_auth, "75%", "90%", "资源分配", [])
            }
        });
    }


    /**
     *   条件搜索，重载数据
     * @author ws
     * @mail  1720696548@qq.com
     * @date  2020/4/10 0010 0:03
     * @return
     */
    function xijiaEventSearch() {
        let $ = layui.$, active = {
            //搜索
            reload: function () {

                // 重置到第一页
                $(".layui-laypage-skip .layui-input").val(1);
                // 数据表格 - 获取表格
                xijiaRenderTable();
                // 刷新分页插件数据
                xijiaLayPage();
            }
        };
        $('.searchTable .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    }


    /**
     * 搜索参数
     * @author wangsong
     * @date 2020/8/23 0023 22:53
     * @return
     * @version 1.0.1
     */
    function xijiaSearchParam() {
        let params = "";
        params += "&name=" + $("#name").val();
        params += "&terminal=" + $("#terminal").val();
        return params;
    }


    /**
     *  监听单选选中--禁用
     * <p>
     * switch(state) 对应 lay-filter='state'
     */
    function xijiaEventSwitch() {
        layui.form.on('switch(disable)', function (data) {
            let disable = data.elem.checked ? 0 : 1;
            let result = Ajax.put(roleUrl + "/" + id, {disable: disable});
            layer.msg(result.msg)
        });
    }
</script>
</body>
</html>